<template>
  <div class="app">
    <h2>{{msg}}</h2>
    <!-- 通过父组件给子组件传递函数类型props实现：子给父传递数据 -->
    <School  :getSchoolName="getSchoolName"/>
    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据   第一种方法：使用@或v-on -->
    <Student @getStudentName="getStudentName" @demo="demo"/>
    
    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据   第二种方法：使用ref -->
    <!-- <Student ref="student"/> -->
    
  </div>
</template>

<script>
  import Student from './components/Student.vue'
  import School from './components/School.vue'
  export default {
    name:'App',
    data(){
      return{
        msg:'你好啊'
      }
    },
    components:{
      Student,
      School,
    },
    methods:{
      getSchoolName(name){
        console.log('App收到学校名称：',name)
      },
      getStudentName(name){
        console.log('App收到学生名称：',name)
      },
      demo(){
        console.log('自定义事件demo被触发了')
      },
    },
    //配合ref使用
    // mounted(){
    //   //这种方法比直接使用v-on灵活，可以加定时器等
    //   this.$refs.student.$on('getStudentName',this.getStudentName)
    // },
  }
</script>
<style scoped>
  .app{
    background-color: gray;
    padding:5px;
  }
</style>